<template>
  <div>
    <div>
      <el-form class="Mssg_form" size="small" label-width="80px">
        <el-form-item label-width="0px" class="label-title">
          <span class="label-index">1</span>
          <span style=" color: black;">基本信息</span>
          <span class="label-tail"></span>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label-width="72" label="门店名称：" :required="true">
              <el-input v-model="baseInfoForm.name" style="width:260px;" placeholder="请输入门店名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="110" class="my_form-item" label="主要联系人：">
              <el-input style="width:260px" v-model="baseInfoForm.relation" placeholder="请输入联系人" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label-width="72" label="手机号码：" class="my_form-item" :required="true">
              <el-input style="width:260px" v-model="baseInfoForm.relationPhone" placeholder="请输入手机号码" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="110" label="门店所在地：" prop="region" class="my_form-item">
                <el-cascader style="width:260px"
                  v-model="baseInfoForm.region"
                  placeholder="地区选择"
                  :options="cityList"
                  :props="{ expandTrigger: 'hover' }"
                  class="input-width"
                  :required="true"
                  clearable
                  @change="handleArea"
                ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label-width="72" label="门店地址：" class="my_form-item" :required="true">
              <el-input style="width:260px" v-model="baseInfoForm.address" placeholder="门店详细地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="110" label="主营 类目：" :required="true">
              <el-select style="width:260px;" v-model="baseInfoForm.mainType" placeholder="主营类别">
                <el-option :label="'女装'" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
      </el-form>
    </div>
    <!-- <h4>购买设置</h4> -->
    <div>
      <el-form label-width="90px" size="small" class="Mssg_form">
        <el-form-item label-width="0px" class="label-title">
          <span class="label-index">2</span>
          <span style=" color: black;">营业执照信息</span>
          <span class="label-tail"></span>
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label-width="72" label="法人 姓名：">
              <el-input style="width:260px;" v-model="baseInfoForm.legalPerson" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="110" label="法人联系电话:" :required="true">
              <el-input style="width:260px;" v-model="baseInfoForm.legalPhone" placeholder="请输入手机号码" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item
              label="营业执照"
              style="display: inline-block"
              :required="true"
              label-width="80px"
            >
              <goods-Uplad
                :url="businessBannerImgList"
                :limit="1"
                @onsuccess="SuccessBusiness"
                @onremove="businessBannerImgremoveOption"
              ></goods-Uplad>
              <div>上传图片支持任意尺寸，大小不超过1M，仅支持jpg，jpeg，png图片格式</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item
              label="门店照片"
              style="display: inline-block"
              :required="true"
              label-width="80px"
            >
              <goods-Uplad
                :url="storeBannerImgList"
                :limit="5"
                @onsuccess="storeImgSuccessOption"
                @onremove="storeImgremoveOption"
              ></goods-Uplad>
              <div>上传图片支持任意尺寸，大小不超过1M，仅支持jpg，jpeg，png图片格式</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item
              label="法定人身份证（正反面）"
              style="display: inline-block"
              :required="true"
              label-width="80px"
            >
              <goods-Uplad
                :url="legalPersonImgList"
                :limit="2"
                @onsuccess="SuccessOptionIdentity"
                @onremove="legalPersonImgremoveOption"
              ></goods-Uplad>
              <div>上传图片支持任意尺寸，大小不超过1M，仅支持jpg，jpeg，png图片格式</div>
            </el-form-item>
          </el-col>
        </el-row>
        
        
      </el-form>
    </div>
    <!-- <h4>商品展示</h4> -->
    <el-form class="Mssg_form">
      <el-form-item label-width="0px" class="label-title">
        <span class="label-index">3</span>
        <span style=" color: black;">云镜信息</span>
        <span class="label-tail"></span>
      </el-form-item>
      <el-form-item v-for="(item,index) in baseInfoForm.mirrorNos" :key="index" label="设备ID：" class="my_form-item" :required="true">
          <el-input style="width:260px;" v-model="baseInfoForm.mirrorNos[index]" :value="item" placeholder="请输入手机号码" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label-width="72" label="设备ID：" class="my_form-item" :required="true">
          <el-input style="width:260px;" v-model="mirrorNos" placeholder="请输入手机号码" maxlength="30"></el-input>
          <el-button @click="addDevice">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- <h4>商品详情</h4> -->
    <div style="margin-top:20px;">
      <el-form class="Mssg_form">
        <el-form-item label-width="0px" class="label-title">
          <span class="label-index">4</span>
          <span style=" color: black;">其他信息</span>
          <span class="label-tail"></span>
        </el-form-item>
        <el-form-item label-width="72" label="创建人：" class="my_form-item" :required="true">
          <el-input style="width:260px;" v-model="baseInfoForm.goodsNo" placeholder="请输入创建人"></el-input>
      </el-form-item>
      </el-form>
    </div>
    <el-form>
      <el-form-item style="text-align:center">
        <el-button style="width:65px;" size="small" @click="handleCancel">取 消</el-button>
        <el-button style="width:65px;" type="primary" size="small" @click="handleConfirm">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getQueryGoods,
  delGoodsImg
} from '@/api/goods'
import goodsUplad from '@/components/upload'
import RichText from '@/components/Tinymce'
import { cityData } from '@/utils/cityData'
import { Basic } from '@/api/base'
export default {
  components: {
    goodsUplad,
    RichText,
    cityData
  },
  props: {
    storeId: {
      type: String,
      default: ''
    },
    goodsAddid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // storeBannerImgCount: 5, // 图片上传数量
      goodsProperty: [],
      treeData: [], // 一级分类数据
      baseInfoForm: {
        name: '', // 门店名称
        relation: '', // 主要联系人
        relationPhone: '', // 手机号码
        province: '',// 省区编码
        city: '',// 市区编码
        district: '',// 城区编码
        address: '', // 详细地址
        mainType: '', // 主营类目
        legalPerson: '',// 法人姓名
        legalPhone: '',// 法人联系电话
        busiLicImg: [],// 营业执照
        shopImgs: '',// 门店照片
        legalIdCardImgs: '',// 法定人身份证（正反面）
        mirrorNos: [],// 设备Id

        creatorId: 1, // 创建人id
        goodsNo: '', // 商品编码


        fileList: [] // 商品图片列表
      },
      imgUrlList: [],
      businessBannerImgList: [],// 营业执照
      storeBannerImgList: [],// 门店
      legalPersonImgList: [],// 法人
      cityList: [],
      region: [],
      mirrorNos:'',
      rules: {
        region: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        legalPerson: [
          { required: true, message: '请输入法人姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        relation: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        relationPhone: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    if(this.$route.query.id) {
      this.queryGoods(this.$route.query.id)
    }
  },
  mounted() {
    const vm = this
    vm.cityList = cityData()
  },
  methods: {
    // 查询商品
    async queryGoods(id) {
      const params = {
        id: id
      }
      await Basic.normal('shop/info',params).then(res => {
          if (res.code === 200) {
            this.baseInfoForm.name = res.data.name
            this.baseInfoForm.relation = res.data.relation
            this.baseInfoForm.relationPhone = res.data.relationPhone

            this.baseInfoForm.region = [res.data.province, res.data.city, res.data.district]
            this.baseInfoForm.address = res.data.address
            this.baseInfoForm.mainType = res.data.mainType
            this.baseInfoForm.legalPerson = res.data.legalPerson
            this.baseInfoForm.legalPhone = res.data.legalPhone
            
            this.baseInfoForm.busiLicImg = res.data.busiLicImg  // 营业执照
            const arrBus = [res.data.busiLicImg]
            if(res.data.busiLicImg == null){
              arrBus.length = 0
              this.businessBannerImgList = arrBus
            }
            this.businessBannerImgList = arrBus.map(x => {
              // 回显图片
              return x
            })

            this.baseInfoForm.shopImgs = res.data.shopImgs  // 门店照片
            this.storeBannerImgList = res.data.shopImgs.map(x => {
              // 回显图片
              return x
            })
            this.baseInfoForm.legalIdCardImgs = res.data.legalIdCardImgs  // 法定人身份证（正反面）
            this.legalPersonImgList = res.data.legalIdCardImgs.map(x => {
              // 回显图片
              return x
            })
            this.baseInfoForm.mirrorNos = res.data.mirrorNos
            this.baseInfoForm.creatorId = res.data.creatorId  
            this.baseInfoForm.goodsNo = res.data.goodsNo  
            this.baseInfoForm.fileList = res.data.fileList  
          }
      })
    },
    // 图片上传成功的回调
    SuccessOptionIdentity(imgList) {
      this.legalPersonImgList.push(imgList[0].urls)// 法定人身份证（正反面）
    },
    storeImgSuccessOption(imgList) {
      this.storeBannerImgList.push(imgList[0].urls)// 门店照片
    },
    SuccessBusiness(imgList) {
      this.businessBannerImgList.push(imgList[0].urls)// 营业执照
    },
    // 删除图片
    legalPersonImgremoveOption(val, file, fileList) {
      this.legalPersonImgList.forEach((item, index) => {
        if (item === file.urls) {
          this.legalPersonImgList.splice(index, 1)
        }
      })
    },
    // 删除图片
    storeImgremoveOption(val, file, fileList) {
      this.storeBannerImgList.forEach((item, index) => {
        if (item === file.urls) {
          this.storeBannerImgList.splice(index, 1)
        }
      })
    },
    // 删除图片
    businessBannerImgremoveOption(val, file, fileList) {
      this.businessBannerImgList.forEach((item, index) => {
        if (item === file.urls) {
          this.businessBannerImgList.splice(index, 1)
        }
      })
    },
     // 地区选择
    handleArea(val) {
      const vm = this
      vm.baseInfoForm.province = parseInt(val[0])
      vm.baseInfoForm.city = parseInt(val[1])
      vm.baseInfoForm.district = parseInt(val[2])
      console.log(vm.baseInfoForm)
    },
    addDevice() {
      this.baseInfoForm.mirrorNos.push(this.mirrorNos)
    },
    // 保存
    handleConfirm(){
      this.baseInfoForm.busiLicImg = this.businessBannerImgList[0]
      this.baseInfoForm.shopImgs = this.storeBannerImgList
      this.baseInfoForm.legalIdCardImgs = this.legalPersonImgList
      console.log(this.baseInfoForm)
      if(this.$route.query.id){
        this.baseInfoForm.id = this.$route.query.id
        Basic.normal('shop/update',this.baseInfoForm).then(res => {})
      }else{
        Basic.normal('shop/save',this.baseInfoForm).then(res => {})
      }

    },
    handleCancel(){
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
// .el-form-item {
//   width: 60%;
// }
.text-end {
  font-size: 14px;
  line-height: 33px;
}
.full-width {
  width: 100%;
  line-height: 33px;
}
.el-icon-circle-close {
  font-size: 24px;
  position: relative;
  bottom: 134px;
  left: 122px;
  color: white;
}
.el-icon-circle-close:hover {
  background: #323842;
  border-radius: 50%;
}
/* input numbel属性去除上下按键 */
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* 小模块标题 */
.label-title {
  span {
    float: left;
    font-weight: bold;
  }
  /deep/ .el-form-item__content {
    // font-weight: bold;
    color: white;
    font-size: 15px;
    line-height: 24px;
  }
  .label-index {
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    border: 1px solid #005aa0;
    border-radius: 24px;
    margin-right: 8px;
    font-weight: normal;
    background: #005aa0;
  }
  .label-tail {
    width: 160px;
    height: 12px;
    margin-left: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }
}
</style>
